<template>
  <div class="attendance-wrapper">
    <div class="name-attendance">
      <div>
        <i class="el-icon-user-solid" />
        <i class="attendance-total">总人数{{ worker }}</i>
        {{ attendanceToday }}
        <div class="attendance-name">今日出工(人)</div>
      </div>
      <div>
        <span class="attendance-title trapezoid-title">实名制考勤</span>
        <span class="total-num">{{ notLeaveNum }}<i class="num-unit">/人</i></span>
        <div class="attendance-name">超时未离场</div>
      </div>
      <div class="being-warning">
        <i />
        <svg-icon class="svgClass" icon-class="warning-icon" />
        <i>警告</i>
        <span class="total-num">{{ helmetSign }}<i class="num-unit">/人</i></span>
        <div class="attendance-name">未带安全帽</div>
      </div>
    </div>
    <!--塔吊次数-->
    <alarm-times />
  </div>
</template>
<script>
import AlarmTimes from '@/views/homeModules/alarmTimes'
import { mapActions, mapState } from 'vuex'
export default {
  name: '',
  components: {
    AlarmTimes
  },
  data() {
    return {

    }
  },
  computed: {
    ...mapState('home', {
      attendanceToday: state => state.attendanceToday,
      worker: state => state.worker,
      helmetSign: state => state.helmetSign,
      notLeaveNum: state => state.notLeaveNum
    })
  },
  created() {
    this.getAttendenceHandle()
    this.getHelmetSignHandle()
    this.getMotLeaveHandle()
  },
  methods: {
    ...mapActions('home', ['getAttendence', 'getHelmetSign', 'getMotLeave']),
    /**
     * 获取总员工数和今日出勤人数
     */
    getAttendenceHandle() {
      this.getAttendence().catch(err => {
        this.errHandle(err.msg)
      })
    },

    /**
     * 获取未戴安全帽人数
     */
    getHelmetSignHandle() {
      this.getHelmetSign().catch(err => {
        this.errHandle(err.msg)
      })
    },

    /**
     * 获取超时未离开人数
     */
    getMotLeaveHandle() {
      this.getMotLeave().catch(err => {
        this.errHandle(err.msg)
      })
    },

    /**
     * 异常弹窗提示
     */
    errHandle(msg) {
      this.$message({
        message: msg || 'Error',
        type: 'error',
        showClose: true,
        center: true,
        duration: 2 * 1000
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/styles/mixin.scss';
.attendance-wrapper{
  width:49.23%;
  float:left;
  height:100% !important;
  display:flex;
  flex-direction:column;
  justify-content: space-between;
}
.name-attendance{
  display:flex;
  flex-direction: row;
  justify-content: space-between;
  @include border-top-style;
  height:37.11%;
  >div{
    position:relative;
    width:31.5%;
    height:100%!important;
    line-height:193px;
    font-size:30px;
    font-weight:400;
    color:rgba(99,245,245,1);
    text-align:center;
    background:rgba(99,245,245,0.07);
    >span.attendance-title{
      width:62%;
      height:33px;
      position:absolute;
      left:20.425%;
      top:0;
    }
    >i:first-of-type{
      position:absolute;
      left:5.6%;
      top:8px;
      @include fontSizeRem(14);
      color:#63F5F5;
      opacity:1;
      line-height:14px;
    }
    >i:nth-of-type(2){
      position:absolute;
      right:10%;
      top:11px;
      display:inline;
      @include fontSizeRem(8);
      color:rgba(99,245,245,1);
      line-height:14px;
      @include fontSizeRem(10);
      font-style:normal;
      &.attendance-total{
        @include fontSizeRem(8)
      }
    }
    >span.total-num{
      @include fontSizeRem(48);
      >i.num-unit{
        @include fontSizeRem(12);
        color:rgba(255,255,255,1);
        font-style: normal;
      }
    }
    >div.attendance-name{
      position:absolute;
      left:0;
      bottom:0;
      width:100%;
      height:40px;
      line-height:40px;
      color:rgba(99,245,245,1);
      @include fontSizeRem(12);
      background:linear-gradient(180deg,rgba(67,212,207,0.4) 0%,rgba(34,106,104,0) 100%);
    }
    &.being-warning{
      background:rgba(233,102,102,0.07);
      color:rgba(233,102,102,1);
      >i{
        color:#E96666;
      }
        >span.total-num{
        color:#E96666;
        >i.num-unit{
          color:#E96666;
        }
      }
      >div.attendance-name{
        background:rgba(233,102,102,0.4);
        color:rgba(233,102,102,1);
      }
      .svgClass{
        position:absolute;
        left:5.6%;
        top:8px;
        width:14px !important;
        height:14px !important;
        fill:#E96666 !important;
      }
    }
  }
}
.trapezoid-title{
  text-align: center;
  line-height:33px;
  @include fontSizeRem(14);
  color:rgba(255,255,255,1);
  background:rgba(53,128,128,1);
  z-index:1000;
  white-space:nowrap;
  @include trapezoid;
}

@media screen and (max-height: 937px){
  .name-attendance{
    >div{
      height:174px;
      line-height:174px;
    }
  }
}

@media screen and (max-height:768px){
  .name-attendance{
    >div{
      height:115px;
      line-height:115px;
      >div.attendance-name{
        height:26px;
        line-height:26px;
      }
     >span.attendance-title{
       height:23px;
       line-height:23px;
     }
    }
  }
  .trapezoid-title{
    height:23px;
    @include trapezoid(23px,13px);
  }
}
@media screen and (max-width:1366px){
  .trapezoid-title{
    @include fontSizeRem(10)
  }
  .name-attendance{
    >div{
       >span.total-num{
        @include fontSizeRem(32);
      }
    }
  }
}
</style>
